import React from 'react';
import { Checkbox, Empty } from 'antd';

import styles from './index.less';

const VALUE_PROP = 'key';
const LABEL_PROP = 'value';

const isChecked = (value, list) => list.find(item => item === value) != null;
const Setting = ({ allList, checkedList, onChange, editable }) => (
    <div className={styles.setting}>
        <div className={styles.header}>
            <div className={styles.title}>员工基本信息</div>
            <div className={styles.tip}>上限：5</div>
        </div>
        <ul className={styles.settingBody}>
            {allList?.length > 0 ? (
                allList.map(item => (
                    <li className={styles.checkItem} key={item[VALUE_PROP]}>
                        <Checkbox
                            value={item[VALUE_PROP]}
                            checked={isChecked(item[VALUE_PROP], checkedList)}
                            onChange={onChange}
                            disabled={item.isCancel === '0' || (!editable && !isChecked(item[VALUE_PROP], checkedList))}
                        />
                        <span className={styles.checkItemTitle}>{item[LABEL_PROP]}</span>
                    </li>
                ))
            ) : (
                <Empty />
            )}
        </ul>
    </div>
);

Setting.defaultProps = {
    allList: [],
    checkedList: [],
    editable: true
};

export default Setting;
